<template>
  <div class="backend-detail">
    <div class="detail-info">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>申报通知详情</span>
            <el-button type="primary" @click="goList">返回列表</el-button>
          </div>
        </template>

        <div v-loading="loading">
          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">指南名称：</el-col>
            <el-col :span="21">{{ noticeDetail.name }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">发布单位：</el-col>
            <el-col :span="21">{{ noticeDetail.keyword }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">通知单位：</el-col>
            <el-col :span="21">{{ noticeDetail.newsType }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">正文内容：</el-col>
            <el-col :span="21">
              <t-editor v-model="noticeDetail.content" style="width: 100%;" :readonly="true"/>
            </el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">附件：</el-col>
            <el-col :span="21">
              <div v-for="(fItem, fIndex) in fileList" :key="fIndex" style="color: #A72836;">
                {{ fItem.name ? fIndex + 1 + '、' + fItem.name + '；' : fIndex + 1 + '、' + fItem.FileName + fItem.FileExtension + '；' }}
              </div>
            </el-col>
          </el-row>
          
        </div>
      </el-card>
    </div>

    <div class="detail-opera">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>控制面板</span>
          </div>
        </template>

        <div class="opera-button">
          <el-dropdown>
            <el-button type="primary" circle>
              <el-icon ><More /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editNotice">编辑</el-dropdown-item>
                <el-dropdown-item @click="deleteNotice">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-card>
    </div>
  </div>
  
</template>

<script>
export default { name: 'backendScienceNoticeDetail' }
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { More } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import tEditor from "@/components/tinymceEditor/tEditor.vue"
import { http } from '@/utils/http/index';
import { format } from '@/plugins/moment.js'
import { checkStatusFieldFormat, reFileResult } from "@/utils/backend.js"

/* 路由 */
const route = useRouter()

onMounted(() => {
  getNoticeDetail()
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情内容 */
const noticeDetail = ref({})

/* 附件列表 */
const fileList = ref([])

/* 获取详情内容 */
const getNoticeDetail = () => {
  return
  loading.value = true
  http.$GET("/SocialScienceM/GetSocialScienceNewsDetailById", { Id: route.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    if(!res.result) return
    noticeDetail.value = res.result
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败")
  })
}

/* 点击跳转编辑页面 */
const editNotice = () => {
  route.push({
    path: "/backend/science-notice/add",
    query: { id: route.currentRoute.value.query.id, type: 'edit' }
  })
}

/* 点击删除 */
const deleteNotice = () => {
  ElMessageBox.confirm(
    '确定要删除此条数据吗？',
    '请确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    return
    http.$POST(`/SocialScienceM/DelSocialScienceNewsById?Id=${route.currentRoute.value.query.id}`).then(res => {
      if (res.IsError) {
        ElMessage({
          type: 'warning',
          message: '操作失败',
        })
      }else{
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        route.push({
          path: "/backend/research-notice"
        })
      }
    }).catch(err => {
      ElMessage.warning("操作失败")
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}

/* 返回列表 */
const goList = () => {
  route.push({
    path: "/backend/science-notice",
    query: route.currentRoute.value.query.currentPage ? { currentPage: route.currentRoute.value.query.currentPage } : {}
  })
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>